<style type="text/css">
#afui #main,#afui .panel{
	background-color: rgb(232,232,232);
}
#microblog-list{
	margin-top: 14px;
}
/*microblog-item*/
.microblog-item{
	background-color: white;
	/*box-shadow: 0 3px 0 rgba(170,177,192,0.3);*/
	box-shadow: 0 1px 2px rgba(0,0,0,0.3);
	margin-bottom: 5px;
	/*margin-bottom: 20px;*/
	/*border: 1px solid #d8d8d8;*/
	border-radius: 2px;
	position: relative;
	overflow: hidden;
}
.m-i-header{
	height: 72px;
	padding: 16px 17px 16px 18px;
	border-bottom: 1px solid #E5E5E5;
}
.m-i-h-avatar,.m-i-h-info{
	float: left;
}
.m-i-header .pull-left{
	margin-right: 11px;
}
.m-i-h-avatar{
	border-radius: 25px;
	border: 0;
	border-top: 1px solid #DDDDDD;
	border-left: 1px solid #EEEEEE;
	border-right: 1px solid #EEEEEE;
}
.m-i-h-a-img,.m-i-c-i-a-img{
	width: 40px;
	height: 40px;
	border-radius: 25px;
}
.m-i-h-i-l-name{
	font-size: 14px;
}
.m-i-h-i-r-digg{
	color: #A2A2A2;
}
.m-i-h-i-r-digg[num=0]{
	color: #A2A2A2;
}
.m-i-h-i-r-digg[num=low]{
	color: #4e8efa;
}
.m-i-h-i-r-digg[num=medium]{
	color: #3D85FF;
}
.m-i-h-i-r-digg[num=high]{
	color: #005FFF;
}
.m-i-h-i-r-digg .glyphicon{
	font-size: 12px;
}
.m-i-h-i-d-num{
	font-size: 14px;
}
.m-i-h-i-l-description{
	margin-top: 3px;
	color: #999;
	font-size: 12px;
}
.m-i-h-right{
	float: right;
}
.m-i-body{
	/*padding-bottom: 0;*/
}
.m-i-b-p{
	margin: 15px 20px 10px 20px;
	letter-spacing: 1px;
	font-size: 14px;
	line-height: 25px;
	font-family: '微软雅黑';
}
.m-i-footer{
	padding: 7px 20px;
	font-size: 12px;
	height: 33px;
}
.m-i-f-info{
	/*color: #404040;*/
}
.m-i-f-btnbox{
	position: absolute;
	bottom: -36px;
	left: 0;
	width: 100%;
	padding: 9px 20px;
	height: 36px;
	color: white;
	background-color: #4e8efa;
}
.m-i-f-b-info{
	float: left;
}
.m-i-f-b-btns{
	float: right;
}
.m-i-f-b-btns div{
	float: left;
	margin-left: 20px;
	cursor: pointer;
}
.m-i-f-b-b-icon .glyphicon{
	font-size: 8px;
	margin-right: 1px;
}
.m-i-footer{
	color: #A2A2A2;
	position: relative;
	overflow: hidden;
	background: #FAFAFA;
	border-top: 1px solid #eee;
}
.m-i-comment{
	padding: 17px;
	clear: both;
}
.m-i-c-textarea{
	clear: both;
	width: 100%;
	height: 57px;
	outline: none;
	resize:none;
	border: 1px solid #d2d2d2;
	border-radius: 2px;
	padding: 8px;
}
.m-i-c-btns{
	clear: both;
	width: 100%;
	height: 23px;
	margin-top: 7px;
	margin-bottom: 12px;
	font-size: 12px;
}
.m-i-c-b-retweet{
	border: 1px solid #d2d2d2;
	background-color: white;
	color: #818181;
	border-radius: 2px;
	height: 30px;
	width: 90px;
	letter-spacing: 1px;
	padding-bottom: 2px;
	margin-right: 7px;
}
.m-i-c-b-reply{
	background-color: #4e8efa;
	color: white;
	border: 1px solid #4e8efa;
	border-radius: 2px;
	height: 30px;
	width: 50px;
	letter-spacing: 1px;
	padding-bottom: 2px;
}
.m-i-c-item{
	border-top: 1px solid #E5E5E5;
	margin-top: 20px;
	padding: 12px 6px;
}
.m-i-c-i-b-i-name{
	font-size: 14px;
	color: #4e8efa;
}
.m-i-c-i-b-i-time{
	font-size: 14px;
	color: #999999;
}
.m-i-c-i-b-i-reply{
	font-size: 12px;
	color: #4e8efa;
	display: none;
	letter-spacing: 2px;
}
.m-i-c-i-b-content{
	font-size: 14px;
	color: #050505;
	margin-top: 10px;
}
.m-i-c-item:hover .m-i-c-i-b-i-reply{
	display: inherit;
}
/*hover in microblog-item*/
.microblog-item:hover .m-i-f-btnbox{
	-webkit-animation-name: grow;
	-webkit-animation-duration: 0.2s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: 0;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-play-state: running;
	bottom: 0;
}
.microblog-item:hover .m-i-h-i-r-digg{
	color: #4e8efa;
}
.microblog-item:hover .m-i-h-i-l-name{
	color: #4e8efa;
}
@-webkit-keyframes grow
{
from {bottom: -36px;}
to {bottom: 0;}
}
</style>

<div id="microblog-list">
	<div class="microblog-item">
		<!-- header -->
		<div class="media m-i-header">
			<div class="pull-left m-i-h-avatar">
				<img class="media-object m-i-h-a-img" src="
					img/avatar/avatar-yellow.jpg
				">
			</div>
			<div class="media-body m-i-h-info">
					<div class="m-i-h-i-l-name">蜂畀</div>
					<div class="m-i-h-i-l-description">来自Android客户端 下午4:13</div>
			</div>
			<div class="m-i-h-right">
				<div class="m-i-h-i-r-digg" num="0">
					<span class="glyphicon glyphicon-thumbs-up"></span>
					<span class="m-i-h-i-d-num">0</span>
				</div>
			</div>
		</div>
		<!-- body -->
		<div class="m-i-body">
			<p class="m-i-b-p" style="margin:15px 20px 10px 20px;">
				冈比亚闪电宣布与台湾断交，台湾外交部次长柯森耀表示，对于冈比亚的决定，中华民国政府感到震惊与遗憾，且已经透过适当管道传达。
			</p>
		</div>
		<!-- footer -->
		<div class="m-i-footer">
			<div class="m-i-f-info">
				转发39 |  评论119
			</div>
			<!-- <div class="m-i-f-btnbox">
				<div class="m-i-f-b-info">
					转发39 |  评论119
				</div>
				<div class="m-i-f-b-btns">
					<div class="m-i-f-b-b-like">
						<span class="m-i-f-b-b-icon">
							<span class="glyphicon glyphicon-heart"></span>
						</span>
						喜欢
					</div>
					<div class="m-i-f-b-b-reponse">
						<span class="m-i-f-b-b-icon">
							<span class="glyphicon glyphicon-share-alt"></span>
						</span>
						回复
					</div>
					<div class="m-i-f-b-b-retweet">
						<span class="m-i-f-b-b-icon">
							<span class="glyphicon glyphicon-retweet"></span>
						</span>
						转发
					</div>
					<div class="m-i-f-b-b-more">
						<span class="m-i-f-b-b-icon">
							<span class="glyphicon glyphicon-plus"></span>
						</span>
						更多
					</div>
				</div>
			</div> -->
		</div>
	</div>

</div>
<script type="text/javascript">
	$.ui.scrollingDivs['main'].addPullToRefresh();//enable pull to refresh
</script>